<template>
  <div class="duanwang_to">
    <!---->
    <div id="header">
      <ul id="header_top1">
        <li @click="doShouye()">
          <img src="../../../assets/Aladeng_img/3_duanhuowang/duanhuowang/back.png" alt="">
        </li>
        <li>
          我的心得
        </li>
        <li>
          <img @click="share" src="../../../assets/Aladeng_img/3_duanhuowang/duanhuowang/share.png" alt="">
        </li>
      </ul>
    </div>
    <!---->
    <div >
      <ul class="pinglun">
        <li v-for="(item, index) in aMogo1">
          <div class="pinglun_name">
            <img src="../../../assets/Aladeng_img/3_duanhuowang/shangpinxiangqing/headImg.png" alt="">
            <span>{{item.name}}</span> <span>{{item.timee}}</span>
          </div>
          <div class="pinglun_yuju">
            {{item.title}}
            <div class="yuju_img">
              <img :src="item.imgUrl" alt="">
            </div>
          </div>
          <div class="pinglun_dianzan">
            <div class="num"><img src="../../../assets/Aladeng_img/3_duanhuowang/quanbuxinde/zan.png" alt=""><span>{{item.zan}}</span></div>
            <div class="num"><img src="../../../assets/Aladeng_img/3_duanhuowang/quanbuxinde/comment.png" alt=""><span>{{item.ping}}</span></div>
            <div class="num"><img src="../../../assets/Aladeng_img/3_duanhuowang/quanbuxinde/share.png" alt=""><span>{{item.fen}}</span></div>
          </div>
          <!---->
          <div class="kongxi"></div>
        </li>
      </ul>

    </div>

    <!---->
    <div class="jiazai">
      <span>加载更多</span>
    </div>
    <!--分享部分-->
    <transition name="fade">
      <div id="show" v-show="isShow" >
        <ul class="top">
          <li>
            <img src="../../../assets/mustbuy/pengyouquan.png" alt="">
            <div class="address">微信朋友圈</div>
          </li>
          <li>
            <img src="../../../assets/mustbuy/weixin.png" alt="">
            <div class="address">微信好友</div>
          </li>
          <li>
            <img src="../../../assets/mustbuy/QQ.png" alt="">
            <div class="address">QQ好友</div>
          </li>
        </ul>
        <ul class="top">
          <li>
            <img src="../../../assets/mustbuy/QQkongjian.png" alt="">
            <div class="address">QQ空间</div>
          </li>
          <li>
            <img src="../../../assets/mustbuy/weibo.png" alt="">
            <div class="address">微博</div>
          </li>
          <li>
            <img src="../../../assets/mustbuy/fuzhilianjie.png" alt="">
            <div class="address">复制链接</div>
          </li>
        </ul>
        <div class="quxiao" @click="fade">取消</div>
      </div>
    </transition>
    <!--蒙板部分-->
    <div class="mark" v-show="isShow"></div>
  </div>
</template>
<script>

  export default {
    data(){
      return{
        isShow: false,
        aMogo1:[
          {
            title:'该模块主要内容是顾客对购买的商品的评价...该模块主要内容是\n' +
            '顾客对购买的商品的评价...',
            name:'小艾',
            timee:'2017-06-28',
            imgUrl:'../../../assets/Aladeng_img/3_duanhuowang/duanhuowang/listImg1.png',
            zan:'99',
            ping:'15',
            fen:'12'
          },
          {
            title:'该模块主要内容是顾客对购买的商品的评价...该模块主要内容是\n' +
            '顾客对购买的商品的评价...',
            name:'小mi',
            timee:'2017-06-26',
            imgUrl:'',
            zan:'77',
            ping:'11',
            fen:'2'
          }
        ]

      }
    },
    components:{
    },
    methods: {
      doShouye(){
        this.$router.go(-1);
      },
      share: function () {
        this.isShow = !this.isShow;
      },
      fade: function () {
        this.isShow = !this.isShow;
      },
    }
  }
</script>
<style scoped>
  .duanwang_to{
    margin-bottom: 5rem;
  }
  #header {
    width: 100%;
    height: 4rem;
    line-height: 3rem;
    background: #e53e42;
  }
  .duan_datu img{
    width: 24rem;
  }
  #header_top1 {
    width: 100%;
    display: flex;
    padding-top: 0.5rem;
    padding-bottom: 0.3rem;
  }
  #header_top1 li{
    text-align: center;
    color: #ffffff;
    font-weight: 200;
  }
  #header_top1 li:nth-child(1){
    flex:1;

  }
  #header_top1 li:nth-child(1) img{
    width: 0.767rem;
  }
  #header_top1 li:nth-child(2){
    flex:10;
    font-size: 1rem;
    padding-top: 0.1rem;
  }
  #header_top1 li:nth-child(3){
    flex:1;
  }
  #header_top1 li:nth-child(3) img{
    width: 1.2rem;
  }

  .duan_ul li{
    flex: 1;
    text-align: center;
    width: 8rem;
    border-right: 1px solid #cccccc;
    /*width: 7.97rem;*/
  }
  .duan_ul li:nth-child(1) img{
    width: 2.5rem;
  }
  .duan_ul li:nth-child(2) img{
    width: 2.3rem;
  }
  .duan_ul li:nth-child(3) img{
    width: 3.167rem;
  }
  h1{
    font-family: SimHei;
    font-size: 0.8rem;
    font-weight:normal;
  }
  .duan_ul li h1:nth-child(3){
    font-weight: 200;
    color: #e53e42;
    margin-top: 0.3rem;
  }
  .duan_ul li img{
    margin: 0.6rem 0;
  }
  h4{
    font-size:0.55rem;
    color: #4d4d4d;
    padding-top: 0.2rem;
    border-top: 1px solid #cccccc;
    width: 5rem;
    margin:  auto;
    font-weight:normal
  }

  .kongxi{
    background-color:#f2f2f2 ;
    height: 1rem;
  }
  /**/
  .xiang_biao1 li:nth-child(1){
    font-size: 1rem;
    font-weight: 200;
    padding-top: 0.5rem;
  }
  .xiang_biao1 li:nth-child(1) img{
    width: 2rem;
    margin: 0 0.5rem;
    display: inline-block;
  }

  .pin span:nth-child(2){
    font-size: 0.6rem;
    vertical-align: 1.15rem;
  }

  .xiang_biao1 li:nth-child(2){
    color: #e53e42;
    padding-left: 0.3rem;
  }
  .xiang_biao1 li:nth-child(3),.xiang_biao1 li:nth-child(4){
    font-size: 0.8rem;
    font-weight: 200;
    padding-left: 0.5rem;
  }
  .xiang_biao1 li:nth-child(1) .xiajiantou img{
    width: 1rem;
  }
  /**/
  /**/
  .myOrder span:nth-child(1){
    float: left;
  }
  /**/


  .pro .left img {
    width: 2.3rem;
    height: 5.1rem;
    padding-top: 0.8rem;
  }

  .bottom .fir img {
    width: 1rem;
    height: 0.667rem;
  }

  .bottom .sec img {
    width: 1.133rem;
    height: 1.1rem;
    display: block;
    float: left;
    font-size: 0;
    vertical-align: middle;
  }
  /**/
  .jiazai{
    background-color:#f2f2f2 ;
    text-align: center;
    padding: 2rem 0;
  }
  .jiazai span{
    color: #808080;
    font-size: 0.9rem;
    font-weight: 200;

  }
  /*ping*/
  .ping_fen{
    font-size: 1rem;
    font-weight: 200;
    display: flex;
    border-bottom: 1px solid #cccccc;
  }
  .ping_fen li{
    flex: 1;
    text-align: center;

  }
  .ping_fen li:nth-child(1){
    border-right: 1px solid #cccccc;
  }
  .ping_fen li:nth-child(1) span{
    border-bottom: 1px solid #e53e42;
    display: inline-block;
    padding: 0.5rem 0;
  }
  .ping_fen li:nth-child(2){
    display: inline-block;
    padding: 0.5rem 0;
  }
  /**/
  .pinglun_name img{
    width: 2.8rem;
  }
  .pinglun_name {
    padding: 0.8rem 1rem;
    font-weight: 200;
  }
  .pinglun_name span{
    vertical-align: 1rem;
  }
  .pinglun_name span:nth-child(3){
    color: #808080;
    padding-left: 10rem;
  }
  .pinglun_yuju{
    font-weight: 200;
    font-size: 0.8rem;
    color: #808080;
    padding: 0 1rem 1rem 1rem;
  }
  .pinglun_dianzan{
    display: flex;
    text-align: center;
    border-top: 1px solid #cccccc;
    padding: 0.5rem 0;
  }
  .pinglun_dianzan div{
    flex: 1;
  }
  .pinglun_dianzan div img{
    width: 1rem;
    padding-right: 1rem;
  }
  .pinglun_dianzan div:nth-child(2){
    border-left: 2px solid #cccccc;
    border-right: 2px solid #cccccc;
  }
  .num span{
    vertical-align: 0.1rem;
    color: #808080;
  }
  .yuju_img{
    width: 9rem;
    text-align: center;
    padding: 1rem 0;
  }
  .yuju_img img{
    width: 2.5rem;
  }
  /*分享部分*/
  #show {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: #ffffff;
    border-top: 0.03rem solid #cccccc;
    padding-top: 1.2rem;
  }

  #show .top {
    display: flex;
    padding-top: 1rem;
  }

  #show .top li {
    flex: 1;
    text-align: center;
  }

  #show .top li img {
    width: 2rem;
    height: 2rem;
    font-size: 0;
  }

  .address {
    font-family: MicrosoftYaHei;
    font-size: 1rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1rem;
    letter-spacing: 0rem;
    color: #333333;
    padding-top: 0.6rem;
  }

  .quxiao {
    background-color: #e53e42;
    border-radius: 0.3rem;
    width: 6rem;
    height: 2rem;
    margin: auto;
    text-align: center;
    margin-top: 1.2rem;
    margin-bottom: 1rem;
    font-family: MicrosoftYaHei;
    font-size: 1rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 2rem;
    letter-spacing: 0rem;
    color: #ffffff;
  }

  /*蒙板部分*/
  .mark {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 10;
  }
  /*动画*/
  .fade-enter,.fade-leave-to{
    transform: translateY(100%);
  }
  .fade-enter-active,.fade-leave-active{
    transition: all 0.1s;
  }
</style>
